<template>
  <CollapsePanel name="element-start-initiator">
    <template #header> ElementStartInitiator </template>
    <p>collapse-title :title="$t('panel.ElementStartInitiator')"</p>
  </CollapsePanel>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted, ref } from 'vue';
  import {
    getInitiatorValue,
    setInitiatorValue,
  } from '/@/components/BpmnChart/src/components/Panel/bo-utils/initiatorUtil';
  import modeler from '/@/store/modules/bpmnModeler';
  import { Base } from 'diagram-js/lib/model';
  import EventEmitter from '/@/utils/bpmn/EventEmitter';

  export default defineComponent({
    name: 'ElementStartInitiator',
    setup() {
      const modelerStore = modeler();
      const getActive = computed<Base | null>(() => modelerStore.getActive!);
      const initiator = ref<string | undefined>('');

      const getElementInitiator = () => {
        initiator.value = getInitiatorValue(getActive.value!);
      };
      const setElementInitiator = (value: string | undefined) => {
        setInitiatorValue(getActive.value!, value);
      };

      onMounted(() => {
        getElementInitiator();

        EventEmitter.on('element-update', getElementInitiator);
      });

      return {
        initiator,
        setElementInitiator,
      };
    },
  });
</script>
